<template>
  <view class="container">
    <!-- 分类导航栏 -->
    <view class="category-bar">
      <scroll-view scroll-x="true" class="category-scroll">
        <view 
          v-for="(status, index) in statusOptions" 
          :key="index" 
          class="status-item"
          :class="{ 'active': selectedStatus === status.value }"
          @click="filterByStatus(status.value)"
        >
          <text>{{ status.label }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 案件追踪列表 -->
    <view class="case-list">
      <view 
        v-for="(item, index) in filteredCases" 
        :key="item.id" 
        class="case-item"
        @click="goToDetail(item)"
      >
        <view class="item-header">
          <text class="item-case-number">{{ item.caseNumber }}</text>
          <text class="item-status" :class="getStatusClass(item.status)">{{ item.status }}</text>
        </view>
        <view class="item-body">
          <text class="item-party">当事人: {{ item.partyName }}</text>
          <text class="item-type">类型: {{ item.type }}</text>
        </view>
        <view class="item-footer">
          <text class="item-date">立案日期: {{ item.filingDate }}</text>
          <text class="item-court">审理法院: {{ item.court }}</text>
        </view>
        <view class="item-progress">
          <text class="progress-title">最新进展:</text>
          <text class="progress-content">{{ item.lastProgress }}</text>
          <text class="progress-date">更新于: {{ item.lastProgressDate }}</text>
        </view>
      </view>
    </view>

    <!-- 无结果提示 -->
    <view v-if="filteredCases.length === 0" class="no-result">
      <text>暂无 {{ selectedStatus === 'all' ? '' : statusOptions.find(s => s.value === selectedStatus)?.label }} 的追踪案件</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selectedStatus: 'all', // 当前选中的状态
      statusOptions: [
        { label: '全部', value: 'all' },
        { label: '审理中', value: 'in_progress' },
        { label: '已结案', value: 'closed' },
        { label: '已归档', value: 'archived' },
        { label: '已撤诉', value: 'withdrawn' },
      ],
      // 模拟追踪案件数据（实际项目应从后端获取）
      trackedCases: [
        {
          id: 1,
          caseNumber: '2025民初字第1234号',
          partyName: '张三',
          type: '民事案件',
          status: 'in_progress',
          filingDate: '2025-01-15',
          court: '北京市朝阳区人民法院',
          lastProgress: '一审开庭结束，等待判决',
          lastProgressDate: '2025-04-20'
        },
        {
          id: 2,
          caseNumber: '2025刑初字第5678号',
          partyName: '李四',
          type: '刑事案件',
          status: 'closed',
          filingDate: '2024-11-20',
          court: '上海市浦东新区人民法院',
          lastProgress: '二审维持原判，案件终结',
          lastProgressDate: '2025-03-10'
        },
        {
          id: 3,
          caseNumber: '2025行初字第9012号',
          partyName: '王五',
          type: '行政案件',
          status: 'archived',
          filingDate: '2024-08-10',
          court: '广州市天河区人民法院',
          lastProgress: '案件已结案并归档',
          lastProgressDate: '2024-12-01'
        },
        {
          id: 4,
          caseNumber: '2025知民初字第3456号',
          partyName: '赵六',
          type: '知识产权案件',
          status: 'in_progress',
          filingDate: '2025-03-05',
          court: '深圳市南山区人民法院',
          lastProgress: '证据交换完成，准备开庭',
          lastProgressDate: '2025-04-18'
        },
        {
          id: 5,
          caseNumber: '2025民撤字第001号',
          partyName: '钱七',
          type: '民事案件',
          status: 'withdrawn',
          filingDate: '2025-02-20',
          court: '杭州市西湖区人民法院',
          lastProgress: '原告主动撤诉',
          lastProgressDate: '2025-04-05'
        },
      ]
    };
  },
  computed: {
    filteredCases() {
      if (this.selectedStatus === 'all') {
        return this.trackedCases;
      }
      return this.trackedCases.filter(caseItem => caseItem.status === this.selectedStatus);
    }
  },
  methods: {
    filterByStatus(status) {
      this.selectedStatus = status;
    },
    goToDetail(caseItem) {
      // 跳转到案件详情页，传入案件ID
      uni.navigateTo({
        url: `/pages/case-detail/case-detail?id=${caseItem.id}`
      });
    },
    getStatusClass(status) {
      switch (status) {
        case 'in_progress': return 'status-in-progress';
        case 'closed': return 'status-closed';
        case 'archived': return 'status-archived';
        case 'withdrawn': return 'status-withdrawn';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.category-bar {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  margin-bottom: 20rpx;
}

.category-scroll {
  white-space: nowrap;
}

.status-item {
  display: inline-block;
  padding: 10rpx 20rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.status-item.active {
  background-color: #007aff;
  color: white;
}

.case-list {
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
  padding: 20rpx 0;
}

.case-item {
  padding: 30rpx;
  border-bottom: 1px solid #eee;
}

.case-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.item-case-number {
  font-size: 30rpx;
  font-weight: bold;
  color: #333;
}

.item-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

.item-status.status-in-progress {
  background-color: #fff3e0;
  color: #ff9800;
}

.item-status.status-closed {
  background-color: #e8f5e9;
  color: #4caf50;
}

.item-status.status-archived {
  background-color: #f5f5f5;
  color: #9e9e9e;
}

.item-status.status-withdrawn {
  background-color: #ffebee;
  color: #f44336;
}

.item-body, .item-footer {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #666;
  margin-bottom: 5rpx;
}

.item-progress {
  margin-top: 20rpx;
  padding-top: 15rpx;
  border-top: 1px dashed #ddd;
}

.progress-title {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 5rpx;
}

.progress-content {
  font-size: 26rpx;
  color: #666;
  display: block;
  margin-bottom: 5rpx;
}

.progress-date {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.no-result {
  text-align: center;
  padding: 80rpx 0;
  color: #999;
  font-size: 28rpx;
}
</style>